<template>
  <view>
    <u-swiper
      :list="productInfo.pictureList"
      key-name="imgUrl"
      indicator-style="right: 32rpx;bottom: 32rpx"
      height="750rpx"
      radius="0"
      class="swiperName"
      @change="handleChangeSwiper"
    >
      <view slot="indicator" class="indicator-num">
        <view class="indicator-num__text">
          <view class="Active">{{ currentSwiperIndex + 1 }}</view>
          <view class="allLength">{{ productInfo.pictureList.length }}</view>
        </view>
      </view>
    </u-swiper>
    <view class="product-box">
      <view class="points">
        <text v-if="exchangeType != 0">￥</text>
        <text class="integraNum">{{ exchangeType == 0?`${productInfo.needIntegral||0}`:`${productInfo.needCoin||0}` }}</text>
        <text v-if="exchangeType == 0"> 积分</text>
        <text v-if="exchangeType == 1" class="p_Xin">(1人民币=1鑫币)</text>
        <text v-if="exchangeType == 1" class="p_priceXin">售价:{{ productInfo.marketPrice }}</text>
      </view>
      <view class="name">{{ productInfo.skuName }}</view>
      <view class="code">
        积分商品编码：<text>{{ productInfo.skuId }}</text>
      </view>
      <view class="code">
        积分商品品牌：<text> {{ productInfo.brand }}</text>
      </view>
    </view>
    <view class="product-info">
      <view class="title">——  商品详情  ——</view>
      <view class="info">
        <mp-html :content="productInfo.appIntroduce" />
      </view>
    </view>
    <!-- <PageFooterBar
      btn-name="立即兑换"
      :info="footerInfo"
      @click="isCanExchange"
    /> -->
    <PageFooterBar
      :btn-name="btnName"
      :grey-btn="greyBtn"
      :info="footerInfo"
      @click="isCanExchange"
    />
    <u-back-top
      icon="/myAccount/static/image/integral-backtop@2x.png"
      :icon-style="{ width: '88rpx', height: '88rpx' }"
      :custom-style="{ backgroundColor: 'transparent' }"
      :scroll-top="scrollTop"
    />
  </view>
</template>

<script>
import { serachIntegralProductMsg, checkExchange } from '@/api/yc_userInfo'
import PageFooterBar from '@/components/page-footer-bar'
export default {
  name: 'PointsRecords',
  components: { PageFooterBar },
  data() {
    return {
      options: {},
      productInfo: {},
      currentSwiperIndex: 0,
      scrollTop: 0,
      title: '',
      cityCode:'',//查询需要销售区域字段,
      warehouseCode:'',//查询需要仓
      btnName:'立即兑换',
      greyBtn:true, //按钮是否高亮
      exchangeType:'',//列表页面传过来的值用于区分是鑫币还是积分
    }
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.title
    });
  },
  onLoad(options) {
    console.log(options.exchangeType)
  this.exchangeType =options.exchangeType
  // #ifdef MP-ALIPAY || MP-WEIXIN
  this.cityCode = this.vuex_cityInfo.cityCode
  this.warehouseCode =this.vuex_cityInfo.warehouseCode
  // #endif
  //#ifdef H5
  const mySelectStation =JSON.parse(localStorage.getItem('my_select_station'))
  this.cityCode = mySelectStation.cityCode
  this.warehouseCode =mySelectStation.warehouseCode
  // #endif
    const { skuId, title } = options ?? {}
    this.options = { skuId }
    if (title == 1) {
      this.title = '鑫币商品详情'
    } else {
      this.title = '积分商品详情'
    }
    this.getProductDetails()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  computed: {
    footerInfo() {
      const info = {
        label: '剩余数量',
        value: this.productInfo?.exchangeNumber ?? 0
      }
      return info
    },
  },
  methods: {
    async getProductDetails() {
      const { memberId } = this.vuex_memberInfo
      const params = { ...this.options, memberId,cityCode:this.cityCode,warehouseCode:this.warehouseCode, exchangeType:this.exchangeType }
      const res = await serachIntegralProductMsg(params)
      if (res.code == 0) {
        this.productInfo = res.data
        const skuStatus = Number(this.productInfo.skuStatus ?? 0)//10-立即兑换；20-积分不足；30-已售罄
        const exchangeType = Number(this.exchangeType) //0-积分 1-鑫币
        if(skuStatus == 10){
          this.btnName ='立即兑换'
          this.greyBtn =true
        }
        if(skuStatus == 20){
          if(exchangeType == 0){
            this.btnName ='积分不足'
          }else{
            this.btnName ='鑫币不足'
          }
          this.greyBtn =false
        }
        if(skuStatus == 30){
          this.btnName ='已售罄'
          this.greyBtn =false
        }
      }
    },
    // 变换轮播图
    handleChangeSwiper(e) {
      this.currentSwiperIndex = e.current
    },
    // 立即兑换
    handleExchange() {
      if (!this.vuex_loginStatus) {
        this.returnLoginFn()
        return false
      }
      const params = {
        id: this.productInfo.id,
        skuId: this.productInfo.skuId,
        cityCode:this.cityCode,
        warehouseCode:this.warehouseCode,
        exchangeType:this.exchangeType, //"兑换类型[0:积分兑换，1:鑫币兑换]"
      }
      checkExchange(params).then((res) => {
        if (res.code == 0) {
          uni.navigateTo({ url: `/myAccount/pointsMall/confirmExchange?skuId=${this.productInfo.skuId}&exchangeType=${this.exchangeType}` })
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    // 能否兑换
    isCanExchange() {
      const saleStatus = Number(this.productInfo.saleStatus ?? 0)
      const skuStatus = Number(this.productInfo.skuStatus ?? 0)//10-立即兑换；20-积分不足；30-已售罄
      const exchangeType = Number(this.exchangeType) //0-积分 1-鑫币
      if (saleStatus == 0) {
        this.$u.toast('商品已下架！')
        return false
      }
      if (skuStatus == 20) {
        this.$u.toast(exchangeType==0?'积分不足!':'鑫币不足!')
        return false
      }
      if (skuStatus == 30) {
        this.$u.toast('已售罄!')
        return false
      }
      if (skuStatus == 10) {
        this.handleExchange()
      }
      const stockNum = this.productInfo?.exchangeNumber ?? 0
      if (stockNum <= 0) {
        this.$u.toast('商品库存数量不足！')
        return false
      }
    },
    // 未登录跳转登录
    returnLoginFn() {
      const callbackUrl = `/myAccount/pointsMall/pointsGoodsDetail&exchangeType=${this.exchangeType}`
      const urlParams = JSON.stringify(this.options)
      uni.navigateTo({
        url: `/login/login/codeLogin?type=confirm&callbackUrl=${callbackUrl}&urlParams=${urlParams}`
      })
    },
  }
}
</script>

<style scoped lang="scss">
.indicator-num__text {
  height: 32rpx;
  line-height: 32rpx;
  background:$uni-text-color-grey;
  border-radius:16rpx;
  overflow: hidden;
  font-size:20rpx;
  text-align: center;
  color: $uni-text-color-inverse;
  display: flex;
  .Active{
    height: 32rpx;
    font-size: $uni-font-size-sm;
    padding:0 5rpx 0 8rpx;
  }
  .allLength{
    position: relative;
    height: 100%;
    padding:0 12rpx 0 16rpx;
    top:3rpx;
  }
  .allLength:after{
    position: absolute;
    left: 0;
    top:-3rpx;
    content: "/";
  }
}
.product-box{
  background:$uni-bg-color;
  margin:24rpx 32rpx 0;
  font-size: $uni-font-size-sm;
  padding: 32rpx 24rpx;
  .points{
    color: $uni-orange;
    .integraNum{
      font-size: 40rpx;
      font-weight: bold;
    }
    .p_priceXin{
      color: #808080ff;
      font-size: 24rpx;
      font-weight: 400;
      margin-left: 48rpx;
      text-decoration: line-through;
    }
    .p_Xin{
       color: #808080ff;
      font-size: 24rpx;
      font-weight: 600;
      margin-left: 48rpx;
    }
  }
  .name{
    font-size: $uni-font-size-base;
    font-weight: bold;
    margin-top: 16rpx;
  }
  .code{
    color: $uni-text-color-tips;
    margin-top: 16rpx;
    text{
      font-weight: bold;
      color: $uni-text-color;
    }
    button{
      height: 32rpx;
      line-height: 32rpx;
      border: 0;
      border-radius: 4rpx;
      background: $uni-f5bg-color;
      color: $uni-text-color;
      padding: 0 8rpx;
      display: inline-block;
      font-size:20rpx;
      position: relative;
      top:6rpx;
      margin-left: 16rpx;
    }
  }
}
.product-info{
  margin: 32rpx 32rpx 0;
  padding-bottom: 158rpx;
  font-size: $uni-font-size-sm;
  .title{
    text-align: center;
    color: $uni-text-color-tips;
    padding-bottom: 8rpx;
  }
  .info {
    height: 100%;
  }
}
</style>
